<template>
  <div>
    <el-card class="box-card gailan">
      <div class="clearfix" slot="header">
        <span>
          <span>设备概览</span>
        </span>
      </div>
      <div class="con">
        <img src="@/assets/img/gateway.png" alt="" />
        <div class="wan">
          <span>{{ deviceObj.LoRaWAN.total }}</span>
          <br />
          <span>LoRaWAN</span><br />
          <span> 网关 </span>
        </div>
        <div class="rapp">
          <span>{{ deviceObj.LoRaPP.total }}</span>
          <br />
          <span>LoRaPP</span><br />
          <span> 网关 </span>
        </div>
        <div class="group">
          <span>{{ deviceObj.group }}</span>
          <br />
          <span>群组</span>
        </div>
        <div class="cgq">
          <div class="img1">
            <img src="@/assets/img/devNode.png" alt="" />
            <div class="cgq1">
              <span>{{ deviceObj.sensor.total }}</span>
              <br />
              <span>传感器</span>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card jiankong">
      <div class="clearfix" slot="header">
        <span>
          <span>监控</span>
        </span>
      </div>
      <div class="jc">
        <div class="text-jc">
          网关离线<span class="text-gl">{{ deviceObj.LoRaWAN.offline }}</span>
        </div>
        <div class="text-jc">
          节点离线<span class="text-gl">{{ deviceObj.LoRaPP.offline }}</span>
        </div>
        <div class="text-jc">
          传感器低电量:
          <span class="text-gl">{{ deviceObj.sensor.offline }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $deviceCount } from "@/api";
export default {
  name: "GaiLan",
  data() {
    return {
      // 对象的数据，是异步获取的，在第一次渲染页面时，有可能数据还没获取到,属性是undefined ,给undefined找下一级的属性就会报错了
      deviceObj: {
        LoRaWAN: "",
        LoRaPP: "",
        group: "",
        sensor: "",
      },
    };
  },
  async mounted() {
    var res = await $deviceCount();
    this.deviceObj = res.data.data;
  },
};
</script>

<style lang="scss" scoped>
.linetwo {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.gailan {
  width: 100%;
  margin-right: 10px;
}
.jiankong {
  width: 40%;
}
.con {
  display: flex;
  margin-top: 50px;
  font-weight: bold;
  justify-content: space-between;
  font-size: 20px;
  .wan {
    padding-left: 40px;
    border-left: 1px solid #ebeff6;
  }
  .rapp {
    padding-left: 40px;
    border-left: 1px solid #ebeff6;
  }
  .group {
    padding-left: 40px;
    border-left: 1px solid #ebeff6;
  }
  .cgq {
    // display: flex;
    padding-left: 40px;
    border-left: 1px solid #ebeff6;
  }
  img {
    width: 40px;
    height: 70px;
  }
  .img1 {
    display: flex;
    // width: 100px;
  }
  .cgq1 {
    margin-left: 40px;
  }
}
.jc {
  font-weight: bold;
  justify-content: space-between;
}
.text-jc {
  margin-top: 20px;
}
</style>